<template>
	<myp-popup :show="showBl" pos="bottom" width="750rpx" height="x-1000rpx" topOffset="50px" @overlayClicked="toCancel"
		boxStyle="z-index: 1000;" overlayStyle="z-index: 999;">
		<!--   -->
		<view class="bgc-fff flex_1 h-flex flex_column b-r-12px-12px-0-0 p-c">
			<!-- 您的弹层内容 -->
			<view class="flex_row_c_c">
				<text class="fs-16px c-333">评论({{getSumCountlength}})</text>
			</view>
			<QS-P height="12px"></QS-P>
			<scroll-view scroll-y="true" class="flex_1 h-flex" :show-scrollbar="false"
				@scrolltolower="getData(false, true)">
				<comment-item @seeRely="seerely" @commentLike="commenlike" v-for="(item, index) in comments"
					:key="item.id" :radom="radom" :item="item" :index="index" type="index-comment">
				</comment-item>
				<list-status v-if="scrolltype == false && nullData == false" :status="{text:'查看更多'}"
					@tap="getData(false, true)"></list-status>
				<list-status v-if="scrolltype == true && nullData == false" :status="{text:'加载中'}"
					@tap="getData(false, true)"></list-status>
				<list-status v-if="nullData == true" :status="{text:'没有更多评论了'}" @tap="getData(false, true)">
				</list-status>
			</scroll-view>
			<view style="height: 49px;width: 1px;">
			</view>

			<view class="flex_column ps-f"
				:style="{ bottom: keyboardHeight + 'px', left: '12px', width: commentInputWidth }">
				<QS-P height="5px"></QS-P>
				<view class="flex_row b-1px-solide-e5e5e5 bgc-fff inputsolid">
					<QS-P width="12px"></QS-P>
					<view class="flex_row flex_1 w-flex">
						<!-- #ifndef APP-NVUE -->
						<input type="text" v-model="commentValue" class="h-32px flex_1 w-flex fs-12px"
							:placeholder="getPlaceholder" :adjust-position="false" @blur="blur" :focus="focusBl"
							@focus="focus" />
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<input ref="input" type="text" v-model="commentValue" class="h-32px flex_1 w-flex fs-12px"
							:placeholder="getPlaceholder" :adjust-position="false" @blur="blur" />
						<!-- #endif -->
					</view>
					<QS-P width="12px"></QS-P>
					<QS-Button class="pinglunButton" theme="primary" fontSize="12px" height="32px"
						:compStyle="{ button: `width: 100px` }" round @click="comment"
						style="background-color: #fe887c;">评论</QS-Button>
				</view>
				<QS-P height="12px"></QS-P>
			</view>
		</view>
	</myp-popup>
</template>

<script>
	import {
		commentlist,
		addcomment,
		delcomment,
		zan,
		nzan,
		commentreplycreate,
		commentreplylist
	} from '@/api/minefile'
	const pxil = uni.getSystemInfoSync().pixelRatio;
	export default {
		name: "update",
		props: {
			nullData: {},
			scrolltype: {},
			getDataFn: {
				type: Function
			},
			idFn: {
				type: String
			},
			getSumCountlength: {},
			list: {}
		},
		data() {
			return {
				showBl: false,
				keyboardHeight: 0,
				commentInputWidth: `${uni._systemInfo.windowWidth - 24}px`,
				radom: 0,
				comments: this.list || [],
				deviceBottom: 0,

				replyUser: null,
				focusBl: false,

				commentValue: '',

				sendData: {
					current: 1,
					size: 10
				},
				listStatus: {
					text: '未加载'
				}
			};
		},
		computed: {
			getPlaceholder() {
				if (this.replyUser) return `回复 @${this.replyUser.nickName}:`;
				return '发条有爱评论吧！';
			},
			getSumCount() {
				function fn(arr) {
					let c = arr.length >>> 0;
					for (let i = 0; i < arr.length; i++) {
						const item = arr[i];
						if (item.childList) {
							c += fn(item.childList);
						}
					}
					return c;
				}
				return fn(this.comments);
			}
		},
		onReachBottom() {
			//阻止重复加载
			// if(timer !== null){
			//     clearTimeout(timer)
			// }
			console.log("000000000")
			// this.pageNum++;
			//          timer=setTimeout(()=>this.circlelist(),500)
			//          this.commentlists()
		},
		mounted() {
			// console.log(this.idFn)
			const sys = uni.getSystemInfoSync();
			const sh = sys.screenHeight;
			this.deviceBottom = sh - sys.windowHeight;
			uni.onKeyboardHeightChange(res => {
				// let h = res.height - (this.deviceBottom || 44) - 7;
				let h = res.height - 7;
				h = h < 0 ? 0 : h;
				this.keyboardHeight = h;
				// uni.$qs.toast(`${this.keyboardHeight}`)
			})

			uni.$on('comment-reply', d => {
				console.log('监听到了')
				this.reply(d)
			});
			// uni.$on('comment-like', d => {
			// 	// console.log("111111111")
			// 	this.like(d);
			// });
		},
		methods: {
			seerely(e) {
				console.log(e)
				let data = {
					commentId: e.item.id
				}
				let topid = e.item.id
				commentreplylist(data).then(res => {

					this.comments.forEach(item => {
						if (item.id == topid) {
							// console.log(item)
							item['childListField'] = res.data;
						}
					})
					this.comments = this.comments;
					this.radom = Math.round(Math.random() * 1000);
					// console.log(this.comments,886)
				})
			},
			commenlike(e) {
				this.zan(e.data, e);
				// e.data[e.index].likeCounts-- = !e.data[e.index].likeCounts++;

				// console.log(this.comments[e.index].isLike)
				// for(let sss in this.comments){
				// this.$nextTick(function(){
				// 	this.$forceUpdate();
				// })
				// }
			},
			// 新增评论
			comment() {
				if (!this.commentValue) {
					uni.$qs.toast('请输入评论内容');
					return;
				}
				let sss = {}
				if (this.replyUser) {
					sss = {
						commentId: this.replyUser.id,
						replyUserId: this.replyUser.userId,
						commentContent: this.commentValue,
					}
					let newsid = this.replyUser.id
					let ttes = this.replyUser
					console.log(132, !this.replyUser.childListField)
					commentreplycreate(sss).then(res => {
						console.log(res.data, "评论回显")
						if (res.success == 1) {
							// this.comments.unshift(res.data)
							if (!ttes.childListField) {
								this.comments.forEach(item => {
									if (item.id == newsid) {
										item['commentReplyNumber'] = item['commentReplyNumber'] * 1 + 1;
									}
								})
							} else {
								let data = {
									commentId: ttes.id
								}
								let topid = ttes.id
								commentreplylist(data).then(res => {

									this.comments.forEach(item => {
										if (item.id == topid) {
											// console.log(item)
											item['childListField'] = res.data;
										}
									})
									this.comments = this.comments;
									this.radom = Math.round(Math.random() * 1000);
								})
							}

							this.radom = Math.round(Math.random() * 1000);
							// console.log(this.comments)
							uni.hideKeyboard();
							this.commentValue = '';
							uni.showToast({
								title: '回复成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					sss = {
						circleId: this.idFn,
						commentContent: this.commentValue,
					}

					addcomment(sss).then(res => {
						console.log(res.data, "评论回显")
						if (res.success == 1) {
							this.comments.unshift(res.data)
							uni.hideKeyboard();
							// const obj = {
							// 	childList: [],
							// 	"content": this.commentValue,
							// 	"grade": 0,
							// 	"id": res.data.id,
							// 	"isAnonymous": 0,
							// 	"likeCounts": res.data.commentHitState,
							// 	"imageUrl": res.data.imageUrl,
							// 	"likeId": 0,
							// 	// "nickName": res.data.nickName,
							// 	"name": res.data.nickName,
							// 	"nickNameReply": "",
							// 	"parentId": 0,
							// 	"postip": "",
							// 	"recTime": "",
							// 	"status": res.data.commentHitState,
							// 	"userId": "",
							// 	"videoId": 0,
							// 	"isLike": false
							// }
							// if (this.replyUser) {
							// 	this.replyUser.childList.unshift(obj);
							// 	this.replyUser.update();
							// } else {
							// 	this.comments.unshift(obj);
							// }
							// console.log(this.comments);
							this.commentValue = '';

							uni.showToast({
								title: '评论成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}





			},
			blur() {
				// console.log('blur');

				setTimeout(() => {
					// this.commentValue = '';
					this.replyUser = null;
				}, 200)
				this.focusBl = false;
			},
			focus() {
				// console.log('focus');
				this.focusBl = true;
			},
			reply(d) {
				// console.log(d)
				if (d.type != 'index-comment') return;
				console.log('comment-reply', d.data)
				this.replyUser = d.data;
				// #ifndef APP-NVUE
				this.focusBl = true;
				// #endif
				// #ifdef APP-NVUE
				this.$refs.input.focus();
				// #endif
			},
			zan(item, LickChange) {
				console.log(item.commentHitState)
				if (item.commentHitState == 0) {
					// 点赞
					let sss = {
						circleId: this.idFn,
						commentId: item.id
					}
					zan(sss).then(res => {
						if (res.success == 1) {
							uni.showToast({
								title: '点赞成功',
								icon: 'none',
								duration: 2000
							});
							LickChange.changeLike()
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(res => {
						console.log(res)
					})
				} else {
					// 取消赞
					let sss = {
						// circleId: this.idFn,
						commentId: item.id
					}
					nzan(sss).then(res => {
						console.log(res)
						if (res.success == 1) {
							// uni.showToast({
							// 	title: '取消成功',
							// 	icon:'success',
							// 	duration: 2000
							// });
							LickChange.changeLike()
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			show(id) {
				this.showBl = true;
				// console.log('comment show', id);
				if (this.sendData.videoId !== id) {
					this.sendData.videoId = id;
					this.getData(true);
				}
			},
			getData(refresh, doEvent) {
				this.$emit('fatherMethod');
				// console.log('comment getData',refresh, doEvent);
				this.$nextTick(function() {
					this.$forceUpdate();
				})
				// uni.$qs.doPageDemand.call(this, {
				// 	getDataFn: this.getDataFn,
				// 	refresh,
				// 	doEvent,
				// 	setName: 'comments',
				// })
			},
			toCancel() {
				this.showBl = false;
			}
		}
	}
</script>

<style lang="scss">
	@import '@/mypUI/base.scss';
	@import "@/static/css/index-px.scss";

	// #ifndef APP-NVUE
	page {
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #F5F5F5;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video,
	picker-view,
	picker-view-column {
		box-sizing: border-box;
	}

	image {
		display: block;
	}

	// #endif

	.page {
		// #ifdef APP-NVUE
		// flex: 1;
		// #endif
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #F5F5F5;
	}

	.page-ffffff {
		// #ifdef APP-NVUE
		// flex: 1;
		// #endif
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #FFFFFF;
	}

	/*每个页面公共css */

	.d-b {
		// #ifndef APP-NVUE
		display: block;
		// #endif
	}

	// white-space w-s
	.w-s-n {
		// #ifndef APP-NVUE
		white-space: nowrap;
		// #endif
	}

	// input
	.input-row {
		height: 24.5px;
		border-bottom: 1px solid #E5E5E5;
	}

	// font-family f-f
	.f-f-Arial {
		font-family: Arial;
	}

	// font-style f-st
	.f-st-italic {
		font-style: italic;
	}

	// width w
	.w-750rpx {
		width: 750rpx;
	}

	.w-flex {
		// #ifndef APP-NVUE
		width: 0;
		// #endif
	}

	// height h
	.h-flex {
		// #ifndef APP-NVUE
		height: 0;
		// #endif
	}

	// position ps
	.ps-r {
		position: relative;
	}

	.ps-a {
		position: absolute;
	}

	.ps-f {
		position: fixed;
	}

	.ps-s {
		position: sticky;
	}

	.text-bottom {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: flex-end;
	}

	.search-box {
		border-radius: 100px;
		border: 1px solid #EEEEEE;
		height: 29px;
	}

	.full {
		// #ifdef APP-NVUE
		flex: 1;
		// #endif
		// #ifndef APP-NVUE
		height: 100%;
		width: 100%;
		// #endif
	}

	.t-of-e-1 {
		text-overflow: ellipsis;
		overflow: hidden;
		// #ifdef APP-NVUE
		lines: 1;
		// #endif
		// #ifndef APP-NVUE
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		// #endif
	}

	.checkbox {
		transform: scale(.7);
	}

	.line-solid {
		flex: 1;
		height: 0;
		border-top-width: 1px;
		border-top-style: solid;
		border-color: #E5E5E5;
	}

	.mini-checkbox {
		height: 12px;
		width: 12px;
		border-radius: 50%;
		border-width: 4px;
		border-style: solid;
		border-color: #999999;

		&.select {
			border-color: #61B665;
		}
	}

	// text-align a-t
	.t-a-r {
		text-align: right;
	}

	.t-a-l {
		text-align: left;
	}

	.t-a-c {
		text-align: center;
	}

	// font-weight f-w
	.f-w-bold {
		font-weight: bold;
	}

	.f-w-500 {
		font-weight: 500;
	}

	// fixed-bottom f-b
	.fixed-bottom,
	.f-b {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
	}

	// border b
	.b-2_5px-s-ffffff {
		border: 2.5px solid #FFFFFF;
	}

	// border-bottom b-b
	.b-b-1px-solide-e5e5e5 {
		border-bottom: 1px solid #E5E5E5;
	}

	// border b
	.b-1px-solide-e5e5e5 {
		border: 1px solid #E5E5E5;
	}

	// border-color b-c
	.b-c-e5e5e5 {
		border-color: #E5E5E5;
	}

	// color c
	.c-333333,
	.c-333 {
		color: #333333;
	}

	.c-666666,
	.c-666 {
		color: #666666;
	}

	.c-888888,
	.c-888 {
		color: #888888;
	}

	.c-999999,
	.c-999 {
		color: #999999;
	}

	.c-007aff {
		color: #007AFF;
	}

	.c-ffffff,
	.c-fff {
		color: #FFFFFF;
	}

	.c-d40000 {
		color: #D40000;
	}

	.c-000000,
	.c-000 {
		color: #000000;
	}

	.c-ff6b00 {
		color: #FF6B00;
	}

	.c-15BE50 {
		color: #15BE50;
	}

	.c-primary {
		color: $uni-color-primary;
	}

	// backgroundColor bgc bgColor
	.bgc-fff,
	.bgc-ffffff,
	.bgColor-fff,
	.bgColor-ffffff {
		background-color: #FFFFFF;
	}

	.bgColor-f5f5f5,
	.bgc-f5f5f5 {
		background-color: #F5F5F5;
	}

	.bgc-000,
	.bgc-000000,
	.bgColor-000,
	.bgColor-000000 {
		background-color: #000000;
	}

	.bgc-eee,
	.bgc-eeeeee,
	.bgColor-eee,
	.bgColor-eeeeee {
		background-color: #EEEEEE;
	}

	.bgc-FF6B00,
	.bgColor-FF6B00 {
		background-color: #FF6B00;
	}

	.bgc-FF0000,
	.bgColor-FF0000 {
		background-color: #FF0000;
	}

	.bgc-61B665 {
		background-color: #61B665;
	}

	.bgc-FF6B00-_1,
	.bgColor-FF6B00_1 {
		background-color: rgba(255, 107, 0, 0.1);
	}

	.bgc-007AFF-_1,
	.bgColor-007AFF-_1 {
		background-color: rgba(0, 122, 255, 0.1);
	}

	.bgc-15BE50-_1,
	.bgColor-15BE50-_1 {
		background-color: rgba(21, 190, 80, 0.1);
	}


	// flex
	.flex_row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
	}

	.flex_column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
	}

	.flex_row_c_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.flex_column_c_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.flex_column_none_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		align-items: center !important;
		// justify-content: flex-start;
	}

	.flex_column_e_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	.flex_row_none_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: center !important;
		// justify-content: flex-start;
	}

	.flex_row_none_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: flex-end !important;
		// justify-content: flex-start;
	}

	.flex_row_none_s {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: flex-start !important;
		// justify-content: flex-start;
	}

	.flex_row_e_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-end !important;
		// align-items: flex-start;
	}

	.flex_row_c_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
	}

	.flex_row_between_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.flex_row_around_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-around !important;
		align-items: center !important;
	}

	.flex_row_s_s {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	.flex_column_between_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.flex_column_between_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		// align-items: flex-start;
	}

	.flex_column_around_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-around !important;
		// align-items: flex-start;
	}

	.flex_column_between_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		// align-items: flex-end;
	}

	.flex_column_e_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: flex-end !important;
		// align-items: flex-start;
	}

	.flex_column_c_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: center !important;
		// align-items: flex-start;
	}

	.flex_column_none_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		align-items: flex-end !important;
		// justify-content: flex-start;
	}

	.flex_row_e_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	.flex_row_c_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
		align-items: flex-end !important;
	}

	.flex_row_between_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: flex-end !important;
	}

	.flex_row_between_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		// align-items: flex-start;
	}

	.flex_1 {
		flex: 1 !important;
	}

	// flex-wrap fw-w
	.fw-w {
		flex-wrap: wrap;
	}

	.update-img {
		height: 121.58px;
		width: 207px;
	}

	.pinglunButton {
		border-radius: 0;
		background: #F3C11E;
		border-radius: 10upx;
	}

	.inputsolid {
		border-radius: 10upx;
	}
</style>
